* {
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: #fafafa
}

#root {
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    height: 100px;
    color: #31c27c;
    text-align: center;
    cursor: default;
}

main {
    width: 100%;
    flex: 1;
    background: #31c27c;
}

footer {
    width: 100%;
    height: 100px;
    text-align: center;
    cursor: default;
}

button {
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 当鼠标点击链接、按钮、输入框时，无边框出现 */
a:focus,button:focus,input:focus {
    outline: 0
}

/* 滚动条整体长宽 */
::-webkit-scrollbar{
    width:10px;height:10px
}

::-webkit-scrollbar-thumb{
    background-color:#ccc;  /* 滚动条初始颜色 */
    border-radius:5px  /* 设置滚动条圆角 */
}

::-webkit-scrollbar-thumb:hover{
    background-color:#666  /* 滚动条鼠标划过时的颜色 */
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-start {
    display: flex;
    justify-content: start;
    align-items: center;
}

.flex-center-x {
    display: flex;
    justify-content: center;
}

.form-button {
    width: 100%;
    height: 40px;
    background-color: #31c27c;
    color: #fff;
}

.form-button:hover {
    background-color: #2caf6f;
}

.form-button:active {
    background-color: #279c63;
}

/* 去掉输入框右侧上下箭头 */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

.add {
    display: inline-block;
    height: 100px;
    text-align: center;
}

.button_four {
    width: 100px;
    height: 40px;
}